<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="200">
			<u-form-item label="SKU图片">
				<u-upload :action="action" max-count="1" :header="header" name="image" :form-data="uploadData"
					@on-success="onSuccess" :file-list="fileList"></u-upload>
			</u-form-item>
			<u-form-item label="名称">
				<u-input v-model="form.skuName" />
			</u-form-item>
			<u-form-item :label="item.specName" v-for="(item,index) in guigeData" :key="index">
				<u-input v-model="specNameList[item.id]" type="select" @click="selectClick(item)" />
			</u-form-item>
			<u-form-item label="销售价">
				<u-input v-model="form.skuSalePrice" />
			</u-form-item>
			<u-form-item label="成本价">
				<u-input v-model="form.skuCostPrice" />
			</u-form-item>
			<u-form-item label="糖果抵扣率" v-show="form.skuSalePrice">
				<view style="width: 100%;">
					<view style="margin: 20rpx 0;display: flex;align-items: center;">
						<view style="flex:1;margin-right: 30rpx;">
							<u-slider v-model="form.skuSweetDeductRate" step="1" :max="max"
								@moving="sweetDeductRateChange">
							</u-slider>
						</view>
						<view style="flex:1">
							<u-number-box v-model="form.skuSweetDeductRate" :max="max" input-width="80"
								input-height="70" @change="sweetDeductRateChange"></u-number-box>
						</view>
					</view>
					<view style="margin-top: 30rpx;font-size: 24rpx;">当天实时参考价格: <text
							style="color: red;">¥{{salePrice}}&nbsp;+&nbsp;{{saleSweet}}</text>个糖果</view>
				</view>
			</u-form-item>
			<u-form-item label="库存">
				<u-input v-model="form.skuTotalStocks" />
			</u-form-item>
			<u-form-item label="库存预警数量">
				<u-input v-model="form.skuWarnUnit" />
			</u-form-item>
		</u-form>
		<view style="margin: 60rpx 0 80rpx 0;">
			<u-button type="primary" class="btn" @click="submit()">保存</u-button>
		</view>
		<u-select v-model="show" :list="selectData" :default-value="[active]" value-name="id"
			label-name="specDetailName" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import api from '@/common/uploadApi'
	export default {
		data() {
			return {
				show: false,
				form: {
					productId: '',
					skuCostPrice: '', //sku成本价
					skuMediaId: '', //sku图片ID-商品媒体信息ID
					skuName: '', //sku名称
					skuPicUrl: '', //sku图片
					skuSalePrice: '', //sku销售价
					skuSweetDeductRate: 0, //sku糖果抵扣率
					skuTotalStocks: '', //sku库存
					skuWarnUnit: '', //sku库存预警数量
					specDetailMap: {}
				},
				max: 0,
				saleSweet: 0,
				salePrice: 0,
				action: '',
				productId: '',
				guigeData: [],
				selectData: [],
				specNameList: {},
				active: 0,
				action: api.imageApi,
				header: {
					"Authorization": 'Bearer ' + uni.getStorageSync('token')
				},
				uploadData: {
					media_type: 2,
					product_id: ''
				},
				fileList: [],
				skuId: ''
			}
		},
		onLoad(option) {
			if (option.skuId) {
				this.skuId = option.skuId;
			} else {
				this.skuId = ''
			}
			this.uploadData.product_id = option.productId;
			this.productId = option.productId;
			this.form.productId = option.productId;
		},
		mounted() {
			this.getSpec();
			this.getDeductRate();
			if (this.skuId) {
				this.getSku();
			} else {
				this.getGoodsDetail();
			}
		},
		methods: {
			getSku() {
				this.$u.api.getSku({
					skuId: this.skuId
				}).then(res => {
					if (res.code == 0) {
						this.fileList.push({
							url: res.data.skuPicUrl
						});
						this.form = {
							id:res.data.id,
							productId: res.data.productId,
							skuCostPrice: res.data.skuCostPrice, //sku成本价
							skuMediaId: res.data.skuMediaId, //sku图片ID-商品媒体信息ID
							skuName: res.data.skuName, //sku名称
							skuPicUrl: res.data.skuPicUrl, //sku图片
							skuSalePrice: res.data.skuSalePrice, //sku销售价
							skuSweetDeductRate: res.data.skuSweetDeductRate, //sku糖果抵扣率
							skuTotalStocks: res.data.skuTotalStocks, //sku库存
							skuWarnUnit: res.data.skuWarnUnit, //sku库存预警数量
							specDetailMap: res.data.properties
						};
						this.saleSweet = res.data.saleSweet;
						this.salePrice = res.data.salePrice;
						res.data.specDetailDTOS.forEach((item,index)=>{
							this.specNameList[item.id] = item.specDetailValues[0].specDetailName
						})
					}
				});
			},
			getSpec() {
				this.$u.api.specList({
					product_id: this.productId
				}).then(res => {
					if (res.code == 0) {
						this.guigeData = res.data;
					}
				})
			},
			getGoodsDetail() {
				this.$u.api.GoodsDetail({
					id: this.productId
				}).then(res => {
					if (res.code == 0) {
						this.form.skuName = res.data.productName;
						this.form.skuSalePrice = res.data.productSalePrice;
						this.form.skuCostPrice = res.data.productCostPrice;
						this.form.skuWarnUnit = res.data.warnUnit;
						this.form.skuSweetDeductRate = res.data.sweetDeductRate;
						this.saleSweet = res.data.saleSweet;
						this.salePrice = res.data.salePrice;
					}
				})
			},
			//获取抵扣率最大值
			getDeductRate() {
				this.$u.api.deductRate().then(res => {
					if (res.code == 0) {
						this.max = res.data;
					}
				})
			},
			//计算返回商品当天实时参考价格
			sweetDeductRateChange() {
				if (this.form.skuSalePrice && this.form.skuSweetDeductRate >= 0) {
					this.$u.api.calculate({
						productSalePrice: this.form.skuSalePrice,
						sweetDeductRate: this.form.skuSweetDeductRate,
					}).then(res => {
						if (res.code == 0) {
							this.saleSweet = res.data.saleSweet;
							this.salePrice = res.data.salePrice;
						} else {
							this.$u.toast(res.msg);
						}
					})
				}
			},
			selectClick(item) {
				this.active = 0;
				this.selectData = item.specDetails;
				item.specDetails.forEach((item, index) => {
					if (this.form.specDetailMap[item.productSpecId] && this.form.specDetailMap[item
							.productSpecId] == item.id) {
						this.active = index;
					}
				})
				this.show = true;
			},
			confirm(val) {
				this.selectData.forEach((item, index) => {
					this.form.specDetailMap[item.productSpecId] = val[0].value;
					this.specNameList[item.productSpecId] = val[0].label;
				});
			},
			onSuccess(data) {
				this.$u.toast('上传成功');
				this.form.skuMediaId = data.data.id;
				this.form.skuPicUrl = data.data.productMediaUrl;
			},
			submit() {
				if(this.skuId){
					this.$u.api.EditSkuSingle(this.form).then(res => {
						if (res.code == 0) {
							this.$u.toast('修改成功');
							let pages = getCurrentPages();
							let currPage = pages[pages.length - 2];
							currPage.$vm.goodsData = [];
							currPage.$vm.getData();
							setTimeout(function(){
								uni.navigateBack();
							},1500)
						} else {
							this.$u.toast(res.msg)
						}
					})
				}else{
					this.$u.api.skuSingle(this.form).then(res => {
						if (res.code == 0) {
							this.$u.toast('添加成功');
							let pages = getCurrentPages();
							let currPage = pages[pages.length - 2];
							currPage.$vm.goodsData = [];
							currPage.$vm.getData();
							setTimeout(function(){
								uni.navigateBack();
							},1500)
						} else {
							this.$u.toast(res.msg)
						}
					})
				}
			}
		},

	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
	}

	.btn {
		background: #1F6ECF;
		box-shadow: 0px 12rpx 16rpx 0px rgba(28, 100, 224, 0.32);
		border-radius: 43rpx;
	}
</style>
